<template>
  <view class="subscribe-page">
    <view class="nav-bar" @click="navBack">
        <image
          class="nav-icon"
          src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756109453487.png?x-oss-process=image/resize,w_200,h_200"
        />
        <text class="nav-title">我的订阅</text>
    </view>
    <!-- 空状态 -->
    <view v-if="subscriptions.length === 0" class="empty-state">
      <image class="empty-image" src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756110636977.png"></image>
      <text class="empty-title">还没有订阅内容</text>
      <text class="empty-subtitle">去发现感兴趣的游戏并点击“订阅”吧</text>
    </view>

    <!-- 订阅列表：左图右操作 -->
    <view v-else class="list-container">
      <view
        v-for="game in subscriptions"
        :key="game.id"
        class="list-item"
        :class="{ active: activeId === game.id }"
        @touchstart="onTouchStart(game.id)"
        @touchend="onTouchEnd"
      >
        <image :src="game.icon" class="thumb-rect" mode="aspectFill"></image>
        <view class="right-box">
          <view class="row-top">
            <text class="game-name">{{ game.name }}</text>
            <text class="game-subs">{{ game.hotness }}人订阅</text>
            <button class="unsubscribe-btn" @click.stop="toggleSubscribe(game)">取消订阅</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from '@/utils/helper'
// 模拟拉取订阅数据，可与后端对接替换
const subscriptions = ref([])

const mockData = [
  { id: 1, name: '原神', hotness: 19876, icon: 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756005641178.webp' },
  { id: 2, name: '崩坏·星穹轨道', hotness: 15322, icon: 'https://act-webstatic.mihoyo.com/puzzle/hkrpg/pz_2Mmoz7kMdq/resource/puzzle/2025/07/24/f629f9da751389b037b1f2bc63bba9c2_1548850742170842337.png?x-oss-process=image/format,webp/quality,Q_90' },
  { id: 3, name: '绝区零', hotness: 12890, icon: 'https://fastcdn.mihoyo.com/content-v2/nap/102005/37198ce9c5ee13abb2c49f1bd1c3ca97_7702488080246216541.png' },
  { id: 4, name: '王者荣耀', hotness: 22345, icon: 'https://game.gtimg.cn/images/yxzj/web202311/bg-c1373a49.jpg' },
  { id: 5, name: '和平精英', hotness: 17654, icon: 'https://game.gtimg.cn/images/gp/web202411/new0619/sec3-features-img1.jpg' },
]

onMounted(() => {
  subscriptions.value = mockData
})

const navBack = () => {
  uni.navigateBack()
}
const toggleSubscribe = (game) => {
  showToast('取消订阅成功', 'success')
  subscriptions.value = subscriptions.value.filter(g => g.id !== game.id)
}

// 轻微滑动/按压动效
const activeId = ref(null)
let pressTimer = null
const onTouchStart = (id) => {
  activeId.value = id
  clearTimeout(pressTimer)
  pressTimer = setTimeout(() => (activeId.value = null), 180)
}
const onTouchEnd = () => {
  clearTimeout(pressTimer)
  setTimeout(() => (activeId.value = null), 80)
}
</script>

<style scoped>
.subscribe-page {
  background: #ffffff;
  min-height: 100vh;
}

/* 空状态 */
.empty-state {
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}
.empty-image {
  width: 280rpx;
  height: 280rpx;
  margin-bottom: 20rpx;
}
.empty-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 8rpx;
}
.empty-subtitle {
  font-size: 24rpx;
}

/* 列表卡片样式（左图右操作） */
.list-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.list-item.active {
  transform: translateY(-6rpx);
  box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.12);
}
.thumb-rect {
  width: 440rpx;
  height: 200rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.right-box {
  flex: 1;
  padding-left: 16rpx;
  display: flex;
  flex-direction: column;
}
.row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
  flex-direction: column;
  gap: 10rpx;
}
.game-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  max-width: 360rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.unsubscribe-btn {
  background: #fff;
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
  font-size: 24rpx;
  padding: 0 18rpx;
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 26rpx;
}
.game-subs {
  font-size: 24rpx;
  color: #999;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #4caf50;
  height: 60rpx;
}

.nav-left {
  display: flex;
  align-items: center;
  color: white;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #eee;
}

.nav-search-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
